<template>
  <div class="container">
    <!-- 操作按钮 -->
    <div class="actions">
      <button class="btn-add" @click="openAddModal">
        <span class="icon">+</span> 添加学生
      </button>
    </div>

    <!-- 数据表格 -->
    <div class="table-wrapper">
      <table class="data-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>薪资</th>
            <th>照片</th>
            <th>公司</th>
            <th>专业</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in students" :key="index">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.salary }}</td>
            <td>{{ item.photo }}</td>
            <td>{{ item.company }}</td>
            <td>{{ item.major__name }}</td>
            <td>
              <button class="btn-edit" @click="openEditModal(item, index)">编辑</button>
              <button class="btn-delete" @click="del(item.name)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 添加模态框 -->
    <dialog ref="addDialogRef" class="modal-dialog">
      <div class="modal-content">
        <h3>添加学生信息</h3>
        <form @submit.prevent="confirmAdd">
          <div class="form-group">
            <label>姓名：</label>
            <input v-model="addForm.name" required>
          </div>
          <div class="form-group">
            <label>薪资：</label>
            <input v-model="addForm.salary">
          </div>
          <div class="form-group">
            <label>专业：</label>
            <input v-model="addForm.major">
          </div>
          <div class="form-group">
            <label>照片：</label>
            <input v-model="addForm.photo">
          </div>
          <div class="form-group">
            <label>公司：</label>
            <input v-model="addForm.company">
          </div>
          <div class="form-actions">
            <button type="button" class="btn-cancel" @click="addDialogRef.close()">取消</button>
            <button type="submit" class="btn-confirm">确认添加</button>
          </div>
        </form>
      </div>
    </dialog>

    <!-- 编辑模态框 -->
    <dialog ref="editDialogRef" class="modal-dialog">
      <div class="modal-content">
        <h3>编辑学生信息</h3>
        <form @submit.prevent="confirmEdit">
          <div class="form-group">
            <label>ID：</label>
            <input v-model="editForm.id" disabled>
          </div>
          <div class="form-group">
            <label>姓名：</label>
            <input v-model="editForm.name" required>
          </div>
          <div class="form-group">
            <label>薪资：</label>
            <input v-model="editForm.salary">
          </div>
          <div class="form-group">
            <label>专业：</label>
            <input v-model="editForm.major">
          </div>
          <div class="form-group">
            <label>照片：</label>
            <input v-model="editForm.photo">
          </div>
          <div class="form-group">
            <label>公司：</label>
            <input v-model="editForm.company">
          </div>
          <div class="form-actions">
            <button type="button" class="btn-cancel" @click="editDialogRef.close()">取消</button>
            <button type="submit" class="btn-confirm">确认编辑</button>
          </div>
        </form>
      </div>
    </dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import http from '@/http';

const router = useRouter();
// 学生列表数据
const students = ref([]);
// 添加表单引用
const addDialogRef = ref(null);
// 编辑表单引用
const editDialogRef = ref(null);
// 添加表单数据
const addForm = ref({
  name: '',
  salary: '',
  major: '',
  photo: '',
  company: ''
});
// 编辑表单数据
const editForm = ref({
  id: '',
  name: '',
  salary: '',
  major: '',
  photo: '',
  company: ''
});
// 当前编辑索引
const currentEditIndex = ref(-1); 

// 获取学生列表
function fetchStudents() {
  console.log('正在获取学生数据...');
  http.get('/students/').then(res => {
    students.value = res.data;
    console.log(students.value);
  }, err => {
    console.error(err);
  });
}

// 删除学生
function del(name) {
  if (confirm(`确定要删除名为 ${name} 的学生吗？`)) {
    http.post('/delete/', {
      name: name
    }).then(res => {
      console.log(res);
      // 重新加载数据
      fetchStudents();
    }).catch(err => {
      console.error('删除学生时发生错误:', err);
    });
  }
}

// 打开添加模态框
function openAddModal() {
  addDialogRef.value.showModal();
}

// 确认添加
function confirmAdd() {
  console.log('要添加的数据：', addForm.value);
  http.post('/add/', addForm.value).then(res => {
    console.log('添加成功', res);
    addDialogRef.value.close();
    // 清空表单
    addForm.value = {
      name: '',
      salary: '',
      major: '',
      photo: '',
      company: ''
    };
    // 重新获取数据
    fetchStudents();
  }).catch(err => {
    console.error('添加失败', err);
  });
}

// 打开编辑模态框
function openEditModal(item, index) {
  currentEditIndex.value = index;
  // 填充表单数据
  editForm.value = {
    id: item.id,
    name: item.name,
    salary: item.salary,
    major: item.major,
    photo: item.photo,
    company: item.company
  };
  editDialogRef.value.showModal();
}

// 确认编辑
function confirmEdit() {
  console.log('要修改的数据：', editForm.value);
  http.post('/edit/', editForm.value).then(res => {
    console.log('编辑成功', res);
    editDialogRef.value.close();
    // 更新本地数据
    if (currentEditIndex.value !== -1) {
      students.value[currentEditIndex.value] = {
       ...students.value[currentEditIndex.value],
       ...editForm.value
      };
    }
  }).catch(err => {
    console.error('编辑失败', err);
  });
}

// 初始化加载数据
onMounted(() => {
  console.log('组件已挂载');
  fetchStudents();
});
</script>

<style scoped>
.container {
  padding: 20px;
  font-family: Arial, sans-serif;
  color: #333;
}

.actions {
  margin-bottom: 20px;
}

.btn-add {
  background-color: #4CAF50;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.btn-add:hover {
  background-color: #45a049;
}

.icon {
  margin-right: 5px;
  font-weight: bold;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 14px;
}

.data-table th, 
.data-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
  vertical-align: middle;
}

.data-table th {
  background-color: #f8f8f8;
  font-weight: bold;
  color: #333;
}

.data-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.data-table tr:hover {
  background-color: #f1f1f1;
}

.btn-edit, .btn-delete {
  padding: 6px 12px;
  margin: 0 2px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
}

.btn-edit {
  background-color: #2196F3;
  color: white;
}

.btn-delete {
  background-color: #f44336;
  color: white;
}

.btn-edit:hover {
  background-color: #0b7dda;
}

.btn-delete:hover {
  background-color: #da190b;
}

.modal-dialog {
  align-self: center;
  justify-self:center;
  width: 80%;
  max-width: 600px;
  border: none;
  border-radius: 6px;
  padding: 0;
  box-shadow: 0 3px 9px rgba(0,0,0,0.3);
}

.modal-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  padding: 20px;
}

.modal-content h3 {
  margin-top: 0;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.btn-confirm, .btn-cancel {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.btn-confirm {
  background-color: #4CAF50;
  color: white;
}

.btn-cancel {
  background-color: #f44336;
  color: white;
}

.btn-confirm:hover {
  background-color: #45a049;
}

.btn-cancel:hover {
  background-color: #da190b;
}

@media (max-width: 768px) {
  .data-table {
    font-size: 13px;
  }
  
  .data-table th, 
  .data-table td {
    padding: 8px;
  }
  
  .btn-edit, .btn-delete {
    padding: 4px 8px;
    font-size: 12px;
  }
}
</style>